<template>
  <div ref="myDiv" class="radarBox" />
</template>

<script>
// import * as echarts from 'echarts'
// // 按需引入
// import * as echarts from 'echarts/core'
// import { TitleComponent, LegendComponent } from 'echarts/components'
// import { RadarChart } from 'echarts/charts'
// import { CanvasRenderer } from 'echarts/renderers'
// // 按需加载注册
// echarts.use([TitleComponent, LegendComponent, RadarChart, CanvasRenderer])
export default {
  mounted() {
    this.drawRadar()
  },
  methods: {
    drawRadar() {
      // 示例：柱状图
      console.log('图表显示的div盒子：', this.$refs.myDiv)
      // 1. 基于准备好的dom，初始化echarts实例
      // var myChart = echarts.init(this.$refs.myDiv)
      var myChart = this.echarts.init(this.$refs.myDiv)
      // 2. 绘制图表
      // opt是绘制图表的配置=》柱状图配置（核心）
      const opt = {
        radar: {
          // shape: 'circle',
          indicator: [
            { name: '工作效率', max: 100 },
            { name: '考勤', max: 100 },
            { name: '积极性', max: 100 },
            { name: '帮助同事', max: 100 },
            { name: '自主学习', max: 100 },
            { name: '正确率', max: 100 }
          ]
        },
        series: [
          {
            // name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [10, 60, 90, 50, 70, 20],
                name: '张三'
              },
              {
                value: [50, 40, 80, 50, 60, 10],
                name: '李四'
              }
            ]
          }
        ]
      }
      myChart.setOption(opt)
    }
  }
}
</script>

<style lang="scss" scoped>
.radarBox {
  width: 100%;
  height: 300px;
}
</style>

